import React from 'react';
import { Card, Row, Col, Statistic, List, Typography, Divider } from 'antd';
import { UserOutlined, TeamOutlined, SolutionOutlined, DollarOutlined } from '@ant-design/icons';
import AdminAttendanceStats from '../../components/attendance/AdminAttendanceStats';

const { Title, Paragraph } = Typography;

/**
 * 管理员仪表盘页面
 * 显示系统概览和关键指标
 */
const AdminDashboard = () => {
    // 模拟数据
    const stats = [
        { title: '员工总数', value: 128, icon: <UserOutlined /> },
        { title: '部门数量', value: 8, icon: <TeamOutlined /> },
        { title: '招聘职位', value: 12, icon: <SolutionOutlined /> },
        { title: '本月薪资支出', value: '¥ 1,280,000', icon: <DollarOutlined /> }
    ];

    const recentActivities = [
        '张三提交了请假申请',
        '新员工李四已完成入职',
        '人事部发布了新的招聘需求',
        '本月薪资已发放完成',
        '技术部门培训计划已更新'
    ];

    return (
        <div>
            <Title level={2}>管理员仪表盘</Title>
            <Paragraph>欢迎回来，管理员。以下是系统概览。</Paragraph>
            
            <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
                <Col xs={24} md={12}>
                    <AdminAttendanceStats />
                </Col>
                <Col xs={24} md={12}>
                    <Row gutter={[16, 16]}>
                        {stats.map((stat, index) => (
                            <Col xs={12} key={index}>
                                <Card>
                                    <Statistic 
                                        title={stat.title}
                                        value={stat.value}
                                        prefix={stat.icon}
                                    />
                                </Card>
                            </Col>
                        ))}
                    </Row>
                </Col>
            </Row>

            <Divider orientation="left">最近活动</Divider>
            
            <Row gutter={[16, 16]}>
                <Col xs={24} md={12}>
                    <Card title="系统通知">
                        <List
                            dataSource={recentActivities}
                            renderItem={(item) => (
                                <List.Item>
                                    {item}
                                </List.Item>
                            )}
                        />
                    </Card>
                </Col>
                <Col xs={24} md={12}>
                    <Card title="快速操作">
                        <p>这里可以放置常用操作的快捷入口</p>
                    </Card>
                </Col>
            </Row>
        </div>
    );
};

export default AdminDashboard;